<template>
  <div class="info-box">
    <div class="info-item">
      <div class="title">
        部门
      </div>
      <div class="res" @click="toUserInfo">
        {{ role }}
      </div>
    </div>
    <div class="info-item">
      <div class="title">
        公告
      </div>
      <div class="res" @click="toNotice">
        {{ ruleCount }}
      </div>
    </div>
    <div class="info-item">
      <div class="title">
        流程
      </div>
      <div class="res" @click="toOA">
        0
      </div>
    </div>
    <div class="info-item">
      <div class="title">
        项目数
      </div>
      <div class="res">
        {{ proCount }}
      </div>
    </div>
  </div>
</template>

<script setup>
import {getHomepageInfo, getRuleCount, getUserFlowCount, } from "@/api/index.js"
import {onMounted, reactive, ref} from "vue"
import {useRouter} from "vue-router"
import {get_pro_count} from "@/api/Project/index.js"

let userId = reactive({})
const role = ref('--')
const ruleCount = ref('-')
const flowCount = ref('-')
const router = useRouter()

const proCount = ref('-')

onMounted(()=>{
  getUserId()
  getUserRole()
  getRulesCount()
  getFlowCount()
  getProCount()
})

//获取用户id
const getUserId = () => {
  userId = JSON.parse(localStorage.getItem('syhyDocManSys'))
}

// 获取首页信息栏信息的用户部门
const getUserRole = async () => {
  try {
    const {data:res} = await getHomepageInfo({
      userId:userId.id
    })
    if(!res && !res.code){
      role.value = '--部'
      return
    } else if (res.code === 200) {
      role.value = res.data
    }
  } catch (e) {
    console.log(e)
  }
}

// 获取公告数量
const getRulesCount = async () => {
  try {
    const {data:res} = await getRuleCount()
    if(res.code === 200){
      ruleCount.value = res.data
    } else {
      ruleCount.value = 0
    }
  } catch (e) {
    console.log(e)
  }
}

// 获取当前用户所有申请数量
const getFlowCount = async () => {
  try {
    const {data:res} = await getUserFlowCount({
      userId:userId.id
    })
    if(!res && !res.code){
      flowCount.value = 0
    } else if (res.code === 200) {
      flowCount.value = res.data
    }
  } catch (e) {
    console.log(e)
  }
}

// 获取项目数量
const getProCount = async () => {
  try {
    const {data:res} = await get_pro_count()
    if(!res && !res.code){
      proCount.value = 0
    } else if (res.code === 200) {
      proCount.value = res.data
    }
  } catch (e) {
    console.log(e)
  }
}

const toNotice = () => {
  router.push('/rule')
}

const toOA = () => {
  router.push('/OA/my-leave/list')
}

const toUserInfo = () => {
  router.push('/user')
}

</script>

<style scoped lang="less">
.info-box{
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 0 7px 7px lightgray;
  background-color: rgba(250, 250, 250);
  height: 9vh;
  width: 56vw;
  margin-left: 8.5vw;
  margin-top: 2vh;
  display: flex;
  justify-content: space-around;
  .info-item{
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    border-right: 1px solid lightgray;
    box-sizing: border-box;
    width: 25%;
    &:last-child{
      border-right: none;
    }
    .title{
      color: #707070;
      font-size: 1.6vh;
    }
    .res{
      color:rgba(26,117,255);
      font-size: 2vh;
      padding-bottom: 0.2vh;
      box-sizing: border-box;
      &:hover{
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
}
</style>
